<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Polling Timer Example</title>

    <!-- compiled JavaScript -->
    <script type="text/javascript" src="../dist/assets/js/angular-timer-bower.js"></script>
    <script type="text/javascript" src="../dist/assets/js/angular-timer-all.min.js"></script>
    <script>
        angular.module('MyApp', ['timer'])
                .controller('PollingController', ['$scope', '$timeout', function ($scope, $timeout) {
                    $scope.timerRunning = true;
                    $scope.timerConsole = '';

                    $scope.timerType = '';

                    $scope.startTimer = function (){
                        $scope.$broadcast('timer-start');
                        $scope.timerRunning = true;
                    };

                    $scope.stopTimer = function (){
                        $scope.$broadcast('timer-stop');
                        $scope.timerRunning = false;
                    };

                    $scope.$on('timer-tick', function (event, args) {
                        $timeout(function (){
                            $scope.timerConsole += $scope.timerType  + ' - event.name = '+ event.name + ', timeoutId = ' + args.timeoutId + ', millis = ' + args.millis +'\n';
                        });
                    });
                }]);
    </script>
</head>
<body ng-app="MyApp">
    <div>
        <h1>AngularJS - Polling Timer Example using <code>timer-tick</code> event</h1>
        <div ng-init="timerType = 'Polling Server'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px;margin:15px">
        <h2>Polling Server every 5 seconds</h2>
        <h3><timer interval="5000"/></h3>
        <textarea style="height: 100px;" row=20 cols="80">{{timerConsole}}</textarea>
        <br/>
        <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
        </div>
        <br/>

        <div ng-init="timerType = 'Saving Documents'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px">
        <h2>Saving Document every 3 seconds</h2>
        <h3><timer interval="3000"/></h3>
        <textarea style="height: 100px;" row=20 cols="80">{{timerConsole}}</textarea>
        <br/>
        <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
        </div>

    </div>
    <br/>
</body>
</html>